<!-- 比赛报名 -->
<template>
	<view class="container">
		<view class="c-test">
			<view class="test-item" v-for="item in selfList" :key="item.id" :style="{'background-image':`url(${baseURL + item.img})`}" @click.stop="toTestDetail(item.id)">
				<view class="p-test-item"></view>
				<view class="test-item-content">
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="test-item" v-for="item in testList" :key="item.id" :style="{'background-image':`url(${baseURL + item.back_img})`}" @click.stop="toTestOtherDetail(item.id)">
				<view class="p-test-item"></view>
				<view class="test-item-content">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "test",
		data() {
			return {
				// 考级列表
				testList:[],
				// 平台考级列表
				selfList:[]
			}
		},
		onLoad() {
			this.getTestList()
			this.getOtherTestList()
		},
		methods: {
			// 获取平台考级
			getTestList(){
				this.$http.getTestList().then(res=>{
					this.selfList = res.data
				})
			},
			// 获取第三方考级列表
			getOtherTestList(){
				this.$http.getOtherTestList().then(res=>{
					this.testList = res.data
				})
			},
			// 跳转考级详情
			toTestDetail(id) {
				uni.navigateTo({
					url: "/pages/pages_test/testDetail?id="+id
				})
			},
			// 跳转第三方考级详情
			toTestOtherDetail(id) {
				uni.navigateTo({
					url: "/pages/pages_test/testOtherDetail?id="+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.c-test {
			width: 100%;

			.test-item {
				width: 100%;
				height: 350rpx;
				margin-top: 20rpx;
				box-sizing: border-box;
				border-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-size: 100%;
				position: relative;

				.test-item-content {
					font-size: 55rpx;
					font-weight: bold;
					text-shadow: 3rpx 3rpx #333;
					color: #fff;
					position: absolute;
				}

				.p-test-item {
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.22);
					position: absolute;
				}
			}
		}
	}
</style>
